<template>
  <div class="detail_header">
    <div class="flex_column match_time">
      <div>{{ homeState.matchDetail.primaryData.match_time }}</div>
    </div>
    <div class="flex_column league" style="justify-content: center">
      <!-- <div class="flex">
        <div class="width_16">
          <img src="@/assets/home/football.png" style="width: 16px;height: 16px" alt="">
        </div>
        <div class="text1">--</div>
      </div> -->
      <div class="flex">
        <div class="width_16">
          <img
            v-if="homeState.matchDetail.primaryData.sport_type == 'soccer'"
            src="@/assets/home/football.png"
            style="width: 16px; height: 16px"
            alt=""
          />
          <img v-else src="@/assets/home/basketball.png" style="width: 16px; height: 16px" alt="" />
        </div>
        <div class="text1">{{ homeState.matchDetail.primaryData.league_name }}</div>
      </div>
    </div>
    <div class="name">
      <div>
        {{ homeState.matchDetail.primaryData.home_name }} vs {{ homeState.matchDetail.primaryData.away_name }}
      </div>
    </div>
    <div class="position">
      <div class="button" @click="homeStore.clickblack()">{{ languageJson.home.return }}</div>
    </div>
  </div>
</template>

<script setup>
const { homeStore, homeState } = inject('HomeStore')
const languageJson = inject('languageJson')
const languageType = inject('languageType')
</script>

<style lang="scss" scoped>
.detail_header {
  margin: 12px 12px 0 12px;
  height: 56px;
  background-color: #f3f5fd;
  padding: 8px 12px;
  display: flex;
}
.match_time {
  width: 100px;
  font-size: 14px;
  font-weight: bold;
  margin-right: 40px;
  color: #000;
  justify-content: space-between;
}
.league {
  justify-content: space-between;
}
.name {
  height: 100%;
  flex: 1;
  font-family: AlibabaPuHuiTi_2_85_;
  font-size: 16px;
  font-weight: bold;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.width_16 {
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  margin-right: 14px;
}
.text1 {
  line-height: 16px;
  font-family: AlibabaPuHuiTi_2_55_;
  font-size: 14px;
  color: #666;
}
.button {
  width: 64px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  font-family: AlibabaPuHuiTi_2_55_;
  font-size: 14px;
  color: #000;
  background-color: #fff;
  cursor: pointer;
}
.position {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
